@extends('Index/base')
@section('content')
	<!-- 顶部标题 -->
	<div class="bgf5 clearfix">
		<div class="top-user">
			<div class="inner">
				<a class="logo" href="/"><img src="/index/images/icons/logo.jpg" alt="U袋网" class="cover"></a>
				<div class="title">购物车</div>
			</div>
		</div>
	</div>
	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<div class="user-content__box clearfix bgf">
				<div class="title">购物车</div>
				<form action="/index/shopcart/udai_shopcart_pay" class="shopcart-form__box" method="post">
					<table class="table table-bordered">
						<thead>
							<tr>
								<th width="150">
									<label class="checked-label"><input type="checkbox" class="check-all"><i></i> 全选</label>
								</th>
								<th width="300">商品信息</th>
								<th width="150">单价</th>
								<th width="200">数量</th>
								<th width="200">现价</th>
								<th width="80">操作</th>
							</tr>
						</thead>
						<tbody>
						<!-- <input type="hidden" name="ids" value=""> -->
						<!-- <input type="hidden" name="nums" value=""> -->
						@foreach($goods as $list)
							<tr>
								<th scope="row">
									<label class="checked-label"><input type="checkbox" name="ids[]" value="{{$list->id}}"><i></i>
										<div class="img"><img src="/upload/{{$list->img}}" alt="" class="cover"></div>
									</label>
								</th>
								<td>
									<div class="name ep3">{{$list->name}}</div>
									<div class="type c9">颜色分类：{{$list->color}}  尺码：{{$list->size}}</div>
								</td>
								<td>¥{{sprintf("%.2f",$list->price)}}</td>
								<td>
									<div class="cart-num__box">
										<input type="button" class="sub" value="-">
										<input type="text" name="num" class="val" value="{{$list->num}}" maxlength="2">
										<input type="hidden" name='id' value="{{$list->id}}">
										<input type="button" class="add" value="+">
									</div>
								</td>
								<td>¥{{sprintf("%.2f",$list->price*$list->num)}}</td>
								<td><a href="javascript:;" onclick="del({{$list->id}})">删除</a></td>
							</tr>
						@endforeach
							
						</tbody>
					</table>
					<div class="user-form-group tags-box shopcart-submit pull-right">
						<button type="submit" class="btn">提交订单</button>
					</div>
					<div class="checkbox shopcart-total">
						<label><input type="checkbox" class="check-all"><i></i> 全选</label>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" id="del">删除</a>
						<div class="pull-right">
							已选商品 <span>0</span> 件
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合计（不含运费）
							<b class="cr">¥<span class="fz24">0.00</span></b>
						</div>
					</div>
					<script>
						$(document).ready(function(){
							var $item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]'),
								$check_all = $('.check-all');
							var total=0;
							var count=0;
							// 全选
							$check_all.on('change', function() {
								$check_all.prop('checked', $(this).prop('checked'));
								$item_checkboxs.prop('checked', $(this).prop('checked'));
								// 改变总价及总所选商品数
								total=0;
								count=0;
								if($(this).prop('checked')){
									$('.table-bordered tbody tr').each(function(){
										total+=parseFloat($(this).children('td:nth-child(5)').html().slice(1));
										count++;
									});
								}
								$('.fz24').html(total.toFixed(2));
								$('.pull-right').children('span').html(count);
							});
							// 点击选择
							$item_checkboxs.on('change', function() {
								var flag = true;
								$item_checkboxs.each(function() {
									if (!$(this).prop('checked')) { flag = false }
								});
								$check_all.prop('checked', flag);

								// 改变总价及总所选商品数
								if($(this).prop('checked')){
									total+=parseFloat($(this).parent().parent().parent().children("td:nth-child(5)").html().slice(1));
									count++;
								}else{
									total-=parseFloat($(this).parent().parent().parent().children("td:nth-child(5)").html().slice(1));
									count--;
								}
								$('.fz24').html(total.toFixed(2));
								$('.pull-right').children('span').html(count);
							});

							// 个数限制输入数字
							$('input.val').onlyReg({reg: /[^0-9.]/g});
							// 加减个数
							$('.cart-num__box').on('click', '.sub,.add', function() {
								var value = parseInt($(this).siblings('.val').val());
								if ($(this).hasClass('add')) {
									$(this).siblings('.val').val(Math.min((value += 1),99));
								} else {
									$(this).siblings('.val').val(Math.max((value -= 1),1));
								}
								var id=$(this).siblings("input[name='id']").val();
								// 改变数据库购物车中的商品数量
								$.post('/index/shopcart/shopcart_changenum',{'id':id,'num':value},function(data){
										if(data==1){
											// layer.msg('success');
										}else{
											// console.log(data);
										}
									});
								// 改变现价
								var p=$(this).parent().parent().siblings('td:nth-child(3)').html().slice(1);
								var n=$(this).siblings('.val').val();
								$(this).parent().parent().siblings('td:nth-child(5)').html('¥'+(p*n).toFixed(2));

								// 如果选中则改变总价
								if($(this).parent().parent().siblings("th").find("input[type='checkbox']").prop('checked')){
									if($(this).hasClass('add')){
										total+=parseFloat($(this).parent().parent().siblings("td:nth-child(3)").html().slice(1));
									}else{
										total-=parseFloat($(this).parent().parent().siblings("td:nth-child(3)").html().slice(1));
									}
									$('.fz24').html(total.toFixed(2));
								}
							});

							// 多行删除
							$('#del').click(function(){
								var ids=[];
								$item_checkboxs.each(function(){
									if($(this).prop('checked')){
										ids.push($(this).parent().prev().val());
									}
								});
								del(ids);
							});

						});

						// 删除调用的函数
						function del(ids){
							if(typeof ids!='object'){
								var arr=[];
								arr[0]=ids;
								ids=arr;
							}
							layer.confirm('确定要删除吗?',function(){
								$.post('/index/shopcart/shopcart_del',{'_method':'delete','ids':ids},function(data){
									if(data==1){
										layer.msg('删除成功',{icon:1});
										window.location.reload();
									}else{
										console.log(data);
										layer.msg('出错了!',{icon:2});
									}
								})
							},function(){
								layer.msg('取消删除');
							});
						}

					</script>
				</form>
			</div>
		</section>
	</div>
@endsection